<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

     <ui:define name="head">
        <style type="text/css">
            .display {
                font-size: 36px !important;
            }
        </style>
        
        <script type="text/javascript">
            //<![CDATA[
                function handleMessage(data) {
                    $('.display').html(data);
                }
            //]]> 
        </script>
    </ui:define>
    
    <ui:define name="title">
        Counter
    </ui:define>

    <ui:define name="description">
        Counter is an instant global click counter. When you click the button,
        updated count value is updated on all connected clients.
    </ui:define>

    <ui:define name="implementation">

        <h:form id="form">
            <h:outputText id="out" value="#{globalCounterView.count}" styleClass="ui-widget display" />

            <br />

            <p:commandButton value="Click" actionListener="#{globalCounterView.increment}" />
        </h:form>

        <p:socket onMessage="handleMessage" channel="/counter" />
        
    </ui:define>

    <ui:define name="source">
        <p:tabView>
            <p:tab title="counter.xhtml">
                    <pre name="code" class="brush:xml">
&lt;h:form id="form"&gt;
    &lt;h:outputText id="out" value="\#{globalCounterView.count}" styleClass="ui-widget display" /&gt;

    &lt;p:commandButton value="Click" actionListener="\#{globalCounterView.increment}" /&gt;
&lt;/h:form&gt;

&lt;p:socket onMessage="handleMessage" channel="/counter" /&gt;

&lt;script type="text/javascript"&gt;
    function handleMessage(data) {
        $('.display').html(data);
    }
&lt;/script&gt;

                    </pre>
                </p:tab>
                
                <p:tab title="GlobalCounterView.java">
                    <pre name="code" class="brush:java">
package org.primefaces.showcase.push.counter;

import java.io.Serializable;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import org.primefaces.push.EventBus;
import org.primefaces.push.EventBusFactory;

@ManagedBean
@ApplicationScoped
public class GlobalCounterView implements Serializable{

	private volatile int count;

	public int getCount() {
		return count;
	}

	public void setCount(int count) {
		this.count = count;
	}
	
	public void increment() {
		count++;
        
        EventBus eventBus = EventBusFactory.getDefault().eventBus();
        eventBus.publish("/counter", String.valueOf(count));
	}
}
                    </pre>
                </p:tab>
                <p:tab title="CounterResource.java">
                    <pre name="code" class="brush:java">
package org.primefaces.showcase.push.counter;

import org.primefaces.push.annotation.OnMessage;
import org.primefaces.push.annotation.PushEndpoint;
import org.primefaces.push.impl.JSONEncoder;

@PushEndpoint("/counter")
public class CounterResource {

    @OnMessage(encoders = {JSONEncoder.class})
    public String onMessage(String count) {
        return count;
    }
}          
                    </pre>
                </p:tab>

            <p:tab title="Documentation" titleStyleClass="tab-doc docslide-526" />
        </p:tabView>

    </ui:define>

</ui:composition>
